<template>
  <view class="login-bg">
    <view class="login-panel">
      <view class="login-title">欢迎使用E-Y系统</view>
      <form @submit.prevent="onSubmit" class="weui-form">
        <view class="weui-cells__group weui-cells__group_form">
          <view class="weui-cells weui-cells_form">
            <view class="weui-cell">
              <view class="weui-cell__hd">
                <text>账号</text>
              </view>
              <view class="weui-cell__bd">
                <input
                  class="weui-input"
                  v-model="form.username"
                  placeholder="请输入账号或手机号"
                  maxlength="32"
                  autocomplete="username"
                />
              </view>
            </view>
            <view class="weui-cell">
              <view class="weui-cell__hd"
                ><label class="weui-label">密码</label></view
              >
              <view class="weui-cell__bd">
                <input
                  class="weui-input"
                  :type="showPwd ? 'text' : 'password'"
                  v-model="form.password"
                  placeholder="请输入密码"
                  maxlength="32"
                  autocomplete="current-password"
                />
              </view>
              <view class="weui-cell__ft">
                <text class="pwd-toggle" @click="showPwd = !showPwd">{{
                  showPwd ? "🙈" : "👁️"
                }}</text>
              </view>
            </view>
          </view>
          <view class="weui-cells__tips login-tips" v-if="msg">{{ msg }}</view>
        </view>
        <!-- 角色选择组件 -->
        <view class="role-select-row">
          <radio-group
            :value="form.role"
            class="role-group"
            @change="onRoleChange"
          >
            <label class="role-radio">
              <radio value="caretaker" color="#faad14" :checked="form.role === 'caretaker'"/> 健康管家
            </label>
            <label class="role-radio">
              <radio value="client" color="#faad14" :checked="form.role === 'client'"/> 客户
            </label>
          </radio-group>
        </view>
        <view class="weui-btn-area">
          <button
            class="weui-btn weui-btn_primary"
            form-type="submit"
            :disabled="loading"
          >
            登录
          </button>
          <button
            class="weui-btn weui-btn_default"
            type="button"
            @click="onReset"
          >
            重置
          </button>
        </view>
      </form>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loading: false,
      msg: "",
      showPwd: false,
      form: {
        username: "",
        password: "",
        role: "caretaker", // 默认选健康管家
      },
    };
  },
  methods: {
    onRoleChange(e) {
      this.form.role = e.detail.value;
    },

    validate() {
      if (!this.form.username) {
        this.msg = "请输入账号或手机号";
        return false;
      }
      if (!this.form.password) {
        this.msg = "请输入密码";
        return false;
      }
      this.msg = "";
      return true;
    },
    async onSubmit() {
      if (!this.validate()) return;
      console.log("提交表单", this.form);
      this.loading = true;
      try {
        let res = await uni.request({
          url:
            this.form.role == "caretaker"
              ? "http://localhost:9000/user/loginct"
              : "http://localhost:9000/uoc/login",
          method: "POST",
          header: { "content-type": "application/x-www-form-urlencoded" },
          data: this.form,
        });

        if (Array.isArray(res)) {
          const [err, response] = res;
          if (err) {
            this.msg = "网络异常";
            this.loading = false;
            return;
          }
          res = response;
        }
        const result = res.data;
        this.loading = false;

        if (result && result.status === 200) {
          uni.setStorageSync("userRole", this.form.role);
          uni.setStorageSync("token", 'admin');
          if (this.form.role === "caretaker") {
            uni.setStorageSync("userId", result.data.user.userId);
            uni.setStorageSync("username", result.data.user.username);
            uni.reLaunch({
              url: "/pages/homeView/homeView",
            });
          } else {
            uni.setStorageSync("clientId", result.data.client.clientId);
            uni.setStorageSync("client", result.data.client);
            uni.setStorageSync("uoc", result.data.userOfClient);
            uni.reLaunch({
              url: "/pages/homeView/clientHome",
            });
          }
        } else {
          this.msg = (result && result.msg) || "登录失败";
        }
      } catch (e) {
        this.loading = false;
        this.msg = "网络异常";
      }
    },

    onReset() {
      this.form.username = "";
      this.form.password = "";
      this.msg = "";
      this.form.role = "caretaker"; // 重置角色
    },
  },
};
</script>

<style scoped>
.login-bg {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(90deg, #fffbe6 55%, #ffe0b2 100%);
  display: flex;
  align-items: flex-start; /* 从顶部开始排列 */
  justify-content: center;
  z-index: 1;
  overflow: auto;
}

/* 面板视觉优化 */
.login-panel {
  position: relative;
  width: 88vw;
  max-width: 360px;
  min-width: 0;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 8px 28px rgba(252, 211, 149, 0.13);
  padding: 22px 14px 16px 100px;
  margin: 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  animation: fadeIn 0.32s;
  margin-top: 160px;
}

/* 标题美化 */
.login-title {
  font-size: 20px;
  font-weight: 800;
  color: #faad14;
  text-align: center;
  margin-bottom: 7px;
  margin-top: 3px;
  letter-spacing: 1.5px;
  line-height: 1.25;
}

/* weui表单输入行优化 */
.weui-cells_form .weui-cell {
  padding: 6px 0;
  min-height: 36px;
  align-items: center;
}

/* 让label与输入框更贴近 */
.weui-cell__hd {
  width: 68px !important;
  min-width: 44px !important;
  padding-right: 4px !important;
  vertical-align: top;
  box-sizing: border-box;
}

/* weui-label最大宽度适当放宽保证对齐 */
.weui-cells__group_form .weui-label {
  max-width: 100%;
}

/* 输入框更细腻，提示词与输入同高 */
.weui-input {
  font-size: 15px;
  line-height: 24px;
  padding: 0 0 0 2px;
  box-sizing: border-box;
  border: none;
  background: none;
}
.weui-input::placeholder {
  color: #bbb;
  font-size: 14px;
  line-height: 24px;
  opacity: 1;
}

/* 密码切换按钮更细腻 */
.pwd-toggle {
  font-size: 18px;
  padding-left: 5px;
  cursor: pointer;
  user-select: none;
  line-height: 32px;
}

/* tips 行更低，字号略小 */
.login-tips {
  color: #ff4949;
  min-height: 16px;
  font-size: 13px;
  text-align: left;
  margin-top: 6px;
  margin-bottom: 2px;
}

/* 按钮行美化，等宽等高，间距优化 */
.weui-btn-area {
  margin-top: 14px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 10px;
}
.weui-btn {
  font-size: 15px;
  border-radius: 10px;
  padding: 0;
  height: 38px;
  line-height: 38px;
  min-width: 0;
  flex: 1;
  margin: 0;
  box-sizing: border-box;
  font-weight: 500;
  letter-spacing: 1px;
}
.weui-btn_primary {
  background: #18b566;
  color: #fff;
  border: none;
}
.weui-btn_default {
  color: #222;
  background: #f6f6f6;
  border: 1px solid #e5e5e5;
}

/* 角色单选行 */
.role-select-row {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 0 2px 0;
}
.role-group {
  display: flex;
  gap: 32px;
}
.role-radio {
  font-size: 15px;
  color: #666;
  display: flex;
  align-items: center;
  cursor: pointer;
}

/* 响应式小屏 */
@media (max-width: 450px) {
  .login-panel {
    max-width: 98vw;
    padding: 14px 2vw 12px 2vw;
  }
  .login-title {
    font-size: 17px;
  }
  .weui-btn {
    font-size: 14px;
    height: 34px;
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.weui-form {
  padding-top: 0;
}
</style>
